<template>
	<view class="big-box flex-col align-center">
		<top-navigation backIconColor='#FFF' bgColor="#00000000" :isFix='true' :isShow='false'>
			<text slot='center-slot' class="center-slot">礼宾车</text>
		</top-navigation>
		<u-toast ref="uToast" />
		<view class="flex-col align-center" v-if="loading">
			<view class="nav-po flex-col align-center">
				<x-img :src="bg_cover" height="437rpx"></x-img>
				<view class="nav-box  justify-between">
					<view @tap="select(item,i )" class="nav-menu justify-center align-center"
						v-for="(item,i ) in arriveType" :key="i"
						:style="{background:selectCarTypeCurrent==item.ind?'':'#D9D9D933','border-radius':i==0?'30rpx 0 0 0':i==3?'0 30rpx 0 0':'0' }">
						{{item.name}}
							<!-- <view class="nav-tag justify-center align-center" v-if="i==1">
							多日包车
						</view> -->
					</view>
				</view>
			</view>
			

			<view scroll-y="true" class="form-info-scroll " style="flex: 1;">
				<view class="form-info ">
					<!-- <view class="tab">
						<u-tabs :list="list2" @click="tapTab" v-if="carTypeCurrent==0"
							lineColor='linear-gradient( 180deg, #FFFFFF 3%, #F2DCBE 24%, #CF9952 91%)' lineWidth='75rpx'
							:scrollable='false' :itemStyle="{
							height:'50rpx'
						}" :activeStyle="{
							'font-size': '32rpx',
							'color': '#000000',
							'font-weight': '500',
						}" :inactiveStyle="{
							'font-weight': '500',
							'font-size': '32rpx',
							'color': '#C2C2C2',
						}"></u-tabs>
						<u-tabs :list="list3" @click="tapTab" v-if="carTypeCurrent==1"
							lineColor='linear-gradient( 180deg, #FFFFFF 3%, #F2DCBE 24%, #CF9952 91%)' lineWidth='137rpx'
							:scrollable='false' :itemStyle="{
							height:'50rpx'
						}" :activeStyle="{
							'font-size': '32rpx',
							'color': '#000000',
							'font-weight': '500',
						}" :inactiveStyle="{
							'font-weight': '500',
							'font-size': '32rpx',
							'color': '#C2C2C2',
						}"></u-tabs>
					</view> -->
					<!-- <tab0 class="" v-if="carTypeCurrent==0" :selectCarTypeCurrent='selectCarTypeCurrent'></tab0> -->
					<tab0 @peopleChange='peopleChange' :carPeopleNum='carPeopleNum' :save='save' class="" :selectMaxTime='selectMaxTime'  :selectCarTypeCurrent='selectCarTypeCurrent'></tab0>
					<!-- <tab1 class="" v-if="carTypeCurrent==1" :selectCarTypeCurrent='selectCarTypeCurrent'></tab1> -->

				</view>
				<view class="" style="height: 37rpx;">

				</view>
				<view class="" style="height: 13rpx;background: rgba(241,241,241,0.5)">

				</view>
				<view class="car-select">
					<x-img static src="/static/images/car/car-select.png" width="163rpx" height="35rpx"></x-img>
				</view>
				<view class="tab-type">
					<view class="tab-type-item justify-between" v-for="(item,index) in tabList" :key="index">
						<x-img class="goods-img" :src="item.cover" radius='8rpx' width="253rpx" height="176rpx"></x-img>
						<view class="goods-info flex-col ">
							<view class="justify-between">
								<view class="">
									<view class="goods-name">
										{{item.type}}
									</view>
									<view class="goods-desc">
										可以搭载{{item.carry_num}}人
									</view>
								</view>

								<view class=" align-center">
									<view class="select-btn justify-center align-center" @tap="selectCar(item,index)"
										:style="{background:item.id==carInd?'#B4651E':'linear-gradient( 138deg, #E6AB75 0%, #BD8552 100%)',color:item.id==carInd?'#FFF':'#FFF'}">
										{{item.id==carInd?'已选择':'选择'}}
									</view>
								</view>
							</view>

							<view class="goods-price">
								起步价：<text style="color: #CC1D1D;">{{selectCarTypeCurrent<2?item.star_price:item.train_start_price}}元</text> (按里程计费)
							</view>
						</view>

					</view>
				</view>
			</view>
			<!-- <view class="start justify-center align-center" @tap="start">
				
			</view> -->
			<bottom-btn @onClick='start' >立即预约</bottom-btn>
		</view>
		<load-page :loading="loading"></load-page>
		<car-note-madal :carNote='car_note' v-if="noteShow" :isShow='noteShow' 
			@close='noteShow=false'></car-note-madal>
	</view>
</template>

<script>
	import {
		carTypeList,
		arriveType,
		tabList
	} from '@/utils/constants.js'
	import carNoteMadal from '../modal/carNoteMadal.vue'
	import tab0 from '../com/tab0.vue'
	import tab1 from '../com/tab1.vue'
	import {
		host
	} from '@/config/config.js'
	import {
		mapActions
	} from 'vuex'
	export default {
		name: "goods-details",
		components: {
			carNoteMadal,
			tab0,
			tab1
		},
		data() {
			return {
				save:false,//是否保存
				noteShow: false,
				useCarTime: Number(new Date()),
				useCarShow: false,
				car_note: '',
				carInd: null,
				airShow: false,
				carTypeCurrent: 0,
				carTypeList: carTypeList,
				tabList: [],
				loading: false,
				bg_cover: '',
				arriveType: arriveType,
				list3: tabList,
				selectCarTypeCurrent: 0,
				peopleNum:0,
				carPeopleNum:1,
				selectMaxTime:0,
			};
		},
		onLoad(option) {
			this.getCarInfo()
		},

		computed: {
			getSplitType(){
				return arriveType.find(item=>item.ind==this.selectCarTypeCurrent).name
			}



		},

		methods: {
			...mapActions(['getCarBgCover', 'getAirList', 'getCarList']),
			tapTab(e) {
				if (this.carTypeCurrent == 0) {
					// 第一个接送机
					this.selectCarTypeCurrent = e.ind
				} else {
					this.selectCarTypeCurrent = e.ind
					// 包车
				}
				console.log(e.ind);
			},
			start() {
				if(!this.carInd){
					uni.$toast('请选择车辆')
					return
				}
				
				if (true) {
					this.save = true
					this.noteShow = true
				}
			},
			select(e, i) {
				this.save = false
				this.selectCarTypeCurrent = e.ind
			},
			peopleChange(e){
				this.peopleNum = e
			},
			selectCar(item, index) {
				if(+item.carry_num<this.peopleNum){
					uni.$toast('人数超过可搭载人数')
					return
				}
				this.carPeopleNum = +item.carry_num
				console.log('已选车型',item);
				this.$store.commit('CAR_TYPE',{...item,split_type:this.getSplitType})
				this.carInd = item.id
			},
			async getCarInfo() {
				// 背景配置
				let bgres = await this.getCarBgCover()
				this.bg_cover = bgres.bg_cover
				// 机场
				// 车列表
				let tabList = await this.getCarList()
				this.tabList = tabList.info_list
				this.selectMaxTime=tabList.max_delay_hours
				this.tabList.map(item=>{
					if(+item.carry_num > this.carPeopleNum){
						this.carPeopleNum = +item.carry_num
					}
				})
				this.car_note = tabList.car_note
				this.loading = true
			},


		}
	}
</script>

<style>
	@import '/common/css/common.css';
</style>
<style lang="scss" scoped>
	.big-box {
		height: 100vh;

		.placeholder-class {
			color: #000;
		}

		.car-select {
			margin: 30rpx 0 0 40rpx;
		}

		.tab-type {
			margin: 0 auto;
			margin-top: 20rpx;
			width: 670rpx;

			.tab-type-item {
				padding: 20rpx 0;
				border-bottom: 1rpx solid rgba(0, 0, 0, 0.12);
			}

			.goods-img {
				margin-right: 20rpx;
			}

			.goods-info {
				// padding: ;
				flex: 1;
			}

			.select-btn {
				width: 140rpx;
				height: 60rpx;
				background: linear-gradient(138deg, #E6AB75 0%, #BD8552 100%);
				border-radius: 10rpx 10rpx 10rpx 10rpx;
				font-family: Source Han Sans SC, Source Han Sans SC;
				font-weight: 400;
				font-size: 32rpx;
				color: #FFFFFF;
			}

			.goods-name {
				margin-top: 15rpx;
				font-family: Source Han Sans SC, Source Han Sans SC;
				font-weight: 400;
				font-size: 32rpx;
				color: #000000;
			}

			.goods-desc {
				font-family: Source Han Sans SC, Source Han Sans SC;
				font-weight: 400;
				font-size: 22rpx;
				color: #7E7E7E;
				margin: 15rpx 0 52rpx;
			}

			.goods-price {
				font-family: Source Han Sans SC, Source Han Sans SC;
				font-weight: 400;
				font-size: 28rpx;
				color: #000000;
				line-height: 33rpx;
				margin-bottom: 10rpx;

				.price {
					font-size: 28rpx;
				}

				.or_price {
					font-size: 28rpx;
					text-decoration: line-through;
				}
			}
		}



		.tab {

			width: 670rpx;
			width: 100%;
			padding: 20rpx 40rpx 0;
			z-index: 10;
			position: sticky;

			/deep/.u-tabs__wrapper__nav__line {
				border-radius: 0rpx 10rpx 0rpx 10rpx;
			}
		}

		.form-info-scroll {
			width: 100vw;
			padding-bottom: calc(90rpx + constant(safe-area-inset-bottom));
			padding-bottom: calc(90rpx + env(safe-area-inset-bottom));
		}

		.form-info {
			padding-top: 27rpx;
			margin: 0 auto;
			width: 670rpx;
			border-radius: 0rpx 0rpx 20rpx 20rpx;
			background: linear-gradient(223deg, #FEEFE7 2%, rgba(252, 252, 252, 0) 100%);
			box-shadow: 0px 4rpx 10rpx 0px rgba(0, 0, 0, 0.1);
			border-radius: 0px 0px 20rpx 20rpx;
		}

		

		.nav-po {
			position: sticky;
			top: 0;
			z-index: 11;

		}

		.nav-box {
			position: absolute;
			bottom: 0;
			width: calc(100vw - 80rpx);
			height: 89rpx;
			border-radius: 30rpx 30rpx 0rpx 0rpx;
			background: #CC1D1D99;
			// background: linear-gradient(180deg, #CC1D1D99 0%, #CC1D1D99 100%);

			.nav-menu {
				flex: 1;
				font-family: Source Han Sans SC, Source Han Sans SC;
				font-weight: 500;
				position: relative;
				font-size: 30rpx;
				color: #FFFFFF;

				.nav-tag {
					position: absolute;
					top: -12rpx;
					right: 19rpx;
					z-index: 2;
					width: 104rpx;
					height: 34rpx;
					background: #CC1D1D;
					border-radius: 10rpx 10rpx 10rpx 0rpx;

					font-family: Source Han Sans SC, Source Han Sans SC;
					font-weight: 400;
					font-size: 22rpx;
					color: #FFFFFF;
				}
			}
		}
	}

	.center-slot {
		color: #FFF;
	}
</style>